<template>
    <div class="trend-selected">
      <Spin v-show="loading" fix></Spin>
        <template v-show="show_graph">
            <div class="graphs-container" style="width:1294px;height:218px">
              <div v-if="graph_data.length>0&&attributes.length>0">
                <scatter-graph :data="graph_data" 
                :attributes_in_common_selected="attributes_in_common_selected"
                :good_feature_name_func="good_feature_name_func"></scatter-graph>
              </div>
              <!-- <div v-for="(e,i) in graph_data" :key="i" class="container-inner" style="diaplay:flex;">
                <trend-graph  :data="e" ></trend-graph>
              </div> -->
            </div>
        </template>
        <div v-show="!show_graph" class="error-hints">
        <span>
            {{error_hint}}
        </span>

        </div>        
    </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import TrendGraph from "./TrendSelectedGraph";
import ScatterGraph from "./SelectedScatterGraph";

export default {
  components: { TrendGraph, ScatterGraph },
  data:
    /**
     * @returns {{attributes:String[],graph_data:Array<{feature_name:String,test_id_range:Number[],feature_data:Array<{test_id:Number,value:Number}>}>}}
     */
    function() {
      return {
        attributes: [],
        graph_data: [],
        loading: false
      };
    },
  props: {
    good_feature_name_func: {
      type: Function
    },
    attributes_those_were_common_selected: Array
  },
  computed: {
    starterId() {
      return this.$store.state.starterId;
    },
    attributes_in_common_selected() {
      return this.attributes
        .map((a, i) => {
          return this.attributes_those_were_common_selected.includes(a)
        })
    },
    /**@returns {String} */
    error_hint() {
      if (this.attributes.length == 0) {
        return "NO FEATURES SELECTED";
      }
      if (this.dates.length == 0 || this.types.length == 0) {
        return "NO BRUSH DATA";
      }
      if (this.graph_data.length == 0) {
        return "NO DATA";
      }
      return "";
    },
    /**@returns {Boolean} */
    show_graph() {
      if (this.attributes.length == 0) {
        return false;
      }
      if (this.dates.length == 0 || this.types.length == 0) {
        return false;
      }
      if (this.graph_data.length == 0) {
        return false;
      }
      return true;
    },
    /**@returns {Array<String>} */
    dates() {
      return this.$store.state.brushed_dates;
    },
    /**@returns {Array<String>} */
    types() {
      return this.$store.state.brushed_types;
    },
    brushed_dates_and_types() {
      return [this.dates, this.types];
    },
    /**@returns {Number} */
    starterId() {
      return this.$store.state.starterId;
    }
  },
  methods: {
    /**
     * @description 依据选中的特征名和刷选的范围,加载数据..
     * @access private
     */
    async $_loadGraphData() {
      let reqs = this.attributes.map(attr =>
        axios.get("/starter/feature/trend_selected/", {
          params: {
            starterId: this.starterId,
            attr: attr,
            dates: this.dates,
            types: this.types
          }
        })
      );
      this.loading = true;
      let axresps = await Promise.all(reqs).catch(err => {
        this.loading = false;
      });
      this.loading = false;
      this.graph_data = axresps.map(resp => resp.data);
      // debugger;
    },
    /**@access public @param {String[]} attrs*/
    updateAttributes(attrs) {
      this.attributes = attrs;
    }
  },
  watch: {
    brushed_dates_and_types(val) {
      if (this.attributes.length && this.dates.length && this.types.length) {
        this.$_loadGraphData();
      }
    },
    attributes(val) {
      if (this.attributes.length && this.dates.length && this.types.length) {
        this.$_loadGraphData();
      }
    },
    starterId() {
      this.attributes = [];
      this.graph_data = [];
    }
  }
};
</script>

<style lang="scss">
.trend-selected {
  position: relative;
  .error-hints {
    font-size: 50px;
    color: #f7f7f7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 2px black;
  }
  .graphs-container {
    // display: flex;
    // overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    .container-inner {
    }
  }
}
</style>
